<template>
  <div class="home">
    <div class="mian">
      <div class="my-welcome">
        <div class="top" @click="goEditorWelcome">去编辑</div>
        <p v-html="welcomeInfo"></p>
      </div>
      <!-- 今日数据 -->
      <div class="today-info">
        <div class="top">
          <div class="t-title">
            今日数据<span class="today-time">{{ today }}</span>
          </div>
          <div class="router" style="font-size: 12px">
            <span>详细数据</span><el-icon><ArrowRight /></el-icon>
          </div>
        </div>
        <div class="t-body">
          <!-- 新增用户 -->
          <div class="info">
            <div class="card">
              <div class="title">今日新增用户</div>
              <div class="count">{{ todayInfo.newUser }}</div>
            </div>
          </div>
          <!-- 今日文章总点赞量 -->
          <div class="info">
            <div class="card">
              <div class="title">今日文章总点赞量</div>
              <div class="count">{{ todayInfo.newLikes }}</div>
            </div>
          </div>
          <!-- 今日总评论量 -->
          <div class="info">
            <div class="card">
              <div class="title">今日文章总评论量</div>
              <div class="count">{{ todayInfo.newComments }}</div>
            </div>
          </div>
          <!-- 今日留言数量 -->
          <div class="info">
            <div class="card">
              <div class="title">今日留言数量</div>
              <div class="count">{{ todayInfo.newWallMessage }}</div>
            </div>
          </div>
          <!-- 今日网站访问量 -->
          <div class="info">
            <div class="card">
              <div class="title">今日站点访问量</div>
              <div class="count">{{ todayInfo.todayWebViewCount }}</div>
            </div>
          </div>
        </div>
      </div>
      <!-- 评论管理 -->
      <div class="comment-message">
        <h3 class="top">
          评论管理<span class="today-time">{{ today }}</span>
        </h3>
        <div class="w-body">
          <!-- 评论待回复 -->
          <div class="w-info">
            <div class="w-card">
              <div class="w-title">评论待回复</div>
              <div class="w-count" :class="waitMessages.waitComments === 0 ? 'green' : 'red'">
                {{ waitMessages.waitComments }}
              </div>
            </div>
          </div>
          <!-- 留言待回复 -->
          <div class="w-info">
            <div class="w-card">
              <div class="w-title">留言待查看</div>
              <div class="w-count" :class="waitMessages.waitWallMessage === 0 ? 'green' : 'red'">
                {{ waitMessages.waitWallMessage }}
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 快捷工作台 -->
      <div class="quickly-console">
        <!-- 发布动态 -->
        <div class="add-box">
          <div class="n-title">今日你还未发布动态</div>
          <div class="n-count">0</div>
          <div class="n-go">去发布</div>
        </div>
        <!-- 发布全站通知 -->
        <div class="add-box">
          <div class="n-title" style="color: #000">发布全站通知</div>
          <div class="n-count">0</div>
          <div class="n-go" @click="notifyVis = true">发布</div>
          <el-dialog v-model="notifyVis" width="500">
            <el-form :rules="notifyRules" ref="notifyFormRef" :model="notifyMessage">
              <el-form-item label="通知消息" prop="message">
                <el-input
                  type="textarea"
                  placeholder="有什么重要的事情需要通知..."
                  :rows="4"
                  v-model="notifyMessage.message"
                  maxlength="70"
                  show-word-limit
                ></el-input>
              </el-form-item>
              <el-form-item label="设置过期时间">
                <el-input type="number" v-model="notifyMessage.expirationTime"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="addNotify">通知</el-button>
              </el-form-item>
            </el-form>
          </el-dialog>
        </div>
      </div>
      <div class="basis">
        <!-- 网站实时在站人数 -->
        <div class="time-user">
          <h3>网站实时在站人数显示</h3>
          <div class="users">
            <div class="user" v-for="(item, index) in users" :key="index">
              <div class="nickname">{{ item.cityInfo }}</div>
              <div class="ipaddress">{{ item.ip }}</div>
            </div>
          </div>
        </div>
        <!-- myInfo-welcome-word -->
        <div class="aaa"></div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {
  getCommentInfoService,
  getMyWelcomeInfoService,
  getOnlineUserService,
  getTodayInfoService,
  notifyService,
} from '@/api/Console'
import dayjs from 'dayjs'
import { onMounted, ref, watch } from 'vue'
import { ArrowRight } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { useWebSocket } from '@vueuse/core'
import { serverStore } from '@/stores/server'
import { useRouter } from 'vue-router'

const { server } = serverStore()
const router = useRouter()
const users = ref([]) // 在线用户列表

const today = dayjs().format('YYYY-MM-DD')

const goEditorWelcome = () => {
  // 前往编辑s
  router.push('/addMyInfo/Welcome')
}

// 今日数据
const todayInfo = ref({})

const notifyVis = ref(false)
const notifyFormRef = ref()
const notifyMessage = ref({
  message: '',
  expirationTime: null,
})
const notifyRules = {
  message: [
    {
      required: true,
      message: '通知消息不能为空',
      trigger: 'blur',
    },
  ],
}

// 发布全站通知
const addNotify = () => {
  notifyFormRef.value.validate((valid) => {
    if (valid) {
      if (notifyMessage.value.expirationTime === null) {
        ElMessage.error('请选择过期时间')
        return false
      }
      // 表单验证通过
      notifyMessage.value.expirationTime = parseInt(notifyMessage.value.expirationTime)
      console.log(notifyMessage.value)
      notifyService(notifyMessage.value.message, notifyMessage.value.expirationTime).then(() => {
        notifyVis.value = false
      })
    }
  })
}
/**
 * 获取网站在线人数
 */
const getOnlineUser = async () => {
  const { data } = await getOnlineUserService()
  users.value = data
}

/**
 * 获取今日数据
 * @param today
 */
const getTodayInfo = async (today) => {
  const { data } = await getTodayInfoService(today)
  todayInfo.value = data
}

const waitMessages = ref({})
/**
 * 待处理评论留言数据
 */
const getWaitMessage = async () => {
  const { data } = await getCommentInfoService()
  waitMessages.value = data
}

/**
 * 获取欢迎词
 */
const welcomeInfo = ref('')
const getMyWelcome = async () => {
  const { data } = await getMyWelcomeInfoService()
  welcomeInfo.value = data.content
}

onMounted(() => {
  getTodayInfo(today)
  getWaitMessage()
  getMyWelcome()
  getOnlineUser()
})
</script>

<style scoped lang="scss">
.home {
  padding: 15px;
  background-color: #f3f4f5;

  .mian {
    min-height: 100vh;
    padding: 20px;
    background-color: #fff;
    border-radius: 7px;

    .my-welcome {
      width: 35vw;
      padding: 20px;
      height: 25vh;
      border-radius: 10px;
      background-color: #bbe3f5bb;
      position: relative;

      .top {
        font-size: 13px;
        position: absolute;
        right: 15px;
        top: 7px;
        cursor: pointer;
      }
    }

    .today-info {
      height: 20vh;
      padding: 10px;
      border-radius: 10px;
      border: 0.2px solid #f3f4f6;
      margin: 20px 0;

      .top {
        height: 30%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .t-title {
          .today-time {
            font-weight: 500;
            margin-left: 10px;
            font-size: 13px;
            color: #555758;
          }
        }
      }

      .t-body {
        display: flex;
        gap: 15px;
        .info {
          height: 70%;

          .card {
            width: 10vw;
            padding: 10px;
            background-color: #bbe3f5bb;
            border-radius: 10px;

            .title {
              font-size: 15px;
            }

            .count {
              height: 52px;
              line-height: 52px;
              font-size: 22px;
              font-weight: 500;
              text-align: center;
            }
          }
        }
      }
    }

    .comment-message {
      height: 20vh;
      padding: 10px;
      border-radius: 10px;
      border: 0.2px solid #f3f4f6;
      margin-bottom: 20px;

      .top {
        height: 30%;
        .today-time {
          font-weight: 500;
          margin-left: 10px;
          font-size: 13px;
          color: #555758;
        }
      }

      .w-body {
        display: flex;
        gap: 15px;
        .w-info {
          height: 70%;

          .w-card {
            width: 10vw;
            padding: 10px;
            background-color: #bbe3f5bb;
            border-radius: 10px;

            .w-title {
              font-size: 15px;
            }

            .w-count {
              height: 52px;
              line-height: 52px;
              font-size: 22px;
              font-weight: 500;
              text-align: center;
            }
          }
        }
      }
    }

    .quickly-console {
      height: 17vh;
      padding: 10px;
      border-radius: 10px;
      margin-bottom: 20px;
      border: 0.2px solid #f3f4f6;
      display: flex;
      gap: 10px;

      .add-box {
        width: 10vw;
        height: 100%;
        padding: 10px;
        border-radius: 10px;
        background-color: #bbe3f5bb;
        text-align: center;

        .n-title {
          font-size: 15px;
          color: rgb(228, 71, 71);
        }

        .n-count {
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 36px;
          color: red;
        }

        .n-go {
          font-size: 17px;
          cursor: pointer;
          transition: all 0.2s;
        }
        .n-go:hover {
          color: #3aaaeb;
        }
      }
    }

    .basis {
      display: flex;
      gap: 15px;
      .time-user {
        height: 22vh;
        width: 30vw;
        padding: 10px;
        border-radius: 10px;
        margin-bottom: 20px;
        background-color: #8fb7dd61;

        h3 {
          height: 36px;
          line-height: 36px;
        }

        .users {
          height: 12vh;
          overflow: auto;
          scrollbar-width: none;
          display: flex;
          flex-direction: column;
          gap: 5px;
          .user {
            display: flex;
            justify-content: space-between;
            padding: 5px 20px;
            border-radius: 7px;
            background-color: #afe0ee91;

            .nickname {
              font-weight: 500;
              color: #fff;
            }

            .ipaddress {
              font-size: 14px;
              color: rgb(82, 81, 81);
            }
          }
        }
      }

      .aaa {
        height: 22vh;
        width: 30vw;
        padding: 10px;
        border-radius: 10px;
        margin-bottom: 20px;
        background-color: #8fb7dd61;
      }
    }
  }
}

.green {
  color: rgb(17, 216, 17);
}
.red {
  color: red;
}
</style>